<template>
  <div class="app-container">
    <div class="filter">
      <el-row>
        <el-col :span="24">
          <el-input
            style="width: 120px"
            v-model="filter.name"
            placeholder="商品名称"
            clearable
            @clear="changelist"
            @change="changelist"
          />
          <CateSelect
            v-model="filter.cate"
            @clear="changelist"
            @change="changelist"
          >
          </CateSelect>
          <el-date-picker
            style="width: 300px"
            clearable
            v-model="filter.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button type="primary" icon="el-icon-search" @click="changelist"
            >搜索</el-button
          >
          <el-button type="primary" icon="el-icon-edit" @click="skipToForm"
            >新增</el-button
          >
        </el-col>
      </el-row>
    </div>
    <br />

    <div class="table">
      <el-table :data="goodArr" border size="mini">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="name" label="商品" align="center" width="180">
          <template slot-scope="scope">
            <div class="good">
              <img :src="`${$img.ImgUrl}${scope.row.img}`" />
              <div v-text="scope.row.name"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="cate" label="品类" align="center" width="180">
          <template slot-scope="scope">
            <div>{{ cateToZH(scope.row.cate) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="price" align="center" label="价格">
        </el-table-column>
        <el-table-column prop="create_time" align="center" label="入库时间">
          <template slot-scope="scope">
            <div>{{ scope.row.create_time | date }}</div>
            <div>{{ scope.row.create_time | time }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" align="center" label="上下架">
          <template slot-scope="scope">
            <div v-text="scope.row.status ? '已上架' : '已下架'"></div>
          </template>
        </el-table-column>
        <el-table-column prop="checked" align="center" label="审核状态">
          <template slot-scope="scope">
            <div>{{ scope.row.checked ? "审核通过" : "待审核" }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="handle" align="center" width="240" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                size="mini"
                v-permission="['admin']"
                type="info"
                @click="checkchange(scope.row)"
                v-if="scope.row.checked === 0"
                >审核</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="deletGood(scope.row._id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <br />
    <div class="page" style="margintop: 60px">
      <el-pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="filter.page"
        :page-sizes="[4, 8, 10, 20]"
        :page-size="filter.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import CateSelect from "./components/CateSelect";
import moment from "moment";
import { mapState } from "vuex";
export default {
  name: "GoodList",
  components: {
    CateSelect,
  },
  data() {
    return {
      filter: {
        name: "",
        cate: "",
        date: [],
        page: 1,
        size: 4,
      },
      goodArr: [],
      total: 0,
    };
  },
  filters: {
    date(val) {
      return moment(val).format("MM月DD日");
    },
    time(val) {
      return moment(val).format("HH:mm");
    },
  },
  computed: {
    ...mapState("good", ["cates"]),
    params() {
      return this.filter;
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$api.fetchGoodList(this.params).then((res) => {
        this.goodArr = res.list;
        this.total = res.total;
      });
    },
    changelist() {
      this.init();
    },
    pageChange(page) {
      this.filter.page = page;
      this.init();
    },
    sizeChange(size) {
      this.filter.size = size;
      this.filter.page = 1;
      this.init();
    },
    handleEdit(row) {
      this.$router.push({
        name: "GoodEdit",
        path: "/good/edit",
        params: {
          row: row,
        },
      });
    },
    skipToForm() {
      this.$router.push("/good/add");
    },
    deletGood(id) {
      this.$api.fetchDelGood({ id });
      this.init();
    },
    checkchange(row) {
      this.$confirm("是否允许当前商品通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "驳回",
        type: "warning",
      })
        .then(() => {
          this.$api.fetchGoodCheck({ id: row._id, checked: 1 }).then(() => {
            this.$message({ message: "审核成功", type: "success" });
            this.init();
          });
        })
        .catch(() => {
          this.$api.fetchGoodCheck({ id: row._id, checked: -1 }).then(() => {
            this.$message({ message: "审核成功", type: "success" });
            this.init();
          });
        });
    },
    cateToZH(cate) {
      const result = this.cates.find((ele) => ele.cate == cate);
      return result ? result.cate_zh : "";
    },
  },
};
</script>

<style lang="scss" scoped>
.good {
  text-align: center;
  img {
    display: inline-block;
    width: 60px;
    height: 60px;
    cursor: pointer;
  }
}
</style>